<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局通知测试</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .test-panel {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
            background-color: #f8f9fa;
        }
        .status-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
        }
        .status-active { background-color: #28a745; }
        .status-inactive { background-color: #dc3545; }
        .page-link {
            display: block;
            padding: 10px 15px;
            margin: 5px 0;
            background: white;
            border: 1px solid #ddd;
            border-radius: 5px;
            text-decoration: none;
            color: #333;
            transition: all 0.2s;
        }
        .page-link:hover {
            background: #e9ecef;
            color: #007bff;
            text-decoration: none;
        }
        .test-button {
            margin: 5px;
        }
    </style>
</head>
<body data-user-role="customer">
    <!-- 引入全局通知组件 -->
    <div th:replace="~{common/global-notification :: notification}"></div>
    
    <div class="container mt-4">
        <h1 class="mb-4">全局通知系统测试</h1>
        
        <!-- 当前页面状态 -->
        <div class="test-panel">
            <h3>当前页面状态</h3>
            <div class="row">
                <div class="col-md-6">
                    <p><span id="notificationStatus" class="status-indicator status-inactive"></span>通知状态: <span id="notificationStatusText">未知</span></p>
                    <p>当前页面: <span id="currentPage">-</span></p>
                    <p>用户角色: <span id="userRole">-</span></p>
                </div>
                <div class="col-md-6">
                    <p>轮询间隔: <span id="pollingInterval">5000</span>ms</p>
                    <p>最后检查: <span id="lastCheck">-</span></p>
                    <p>未读数量: <span id="unreadCount" class="badge bg-primary">0</span></p>
                </div>
            </div>
        </div>
        
        <!-- 测试控制 -->
        <div class="test-panel">
            <h3>测试控制</h3>
            <div class="mb-3">
                <button id="startNotification" class="btn btn-success test-button">启动通知</button>
                <button id="stopNotification" class="btn btn-danger test-button">停止通知</button>
                <button id="checkNow" class="btn btn-info test-button">立即检查</button>
                <button id="showTestNotification" class="btn btn-warning test-button">显示测试通知</button>
                <button id="hideNotification" class="btn btn-secondary test-button">隐藏通知</button>
            </div>
            <div class="alert alert-info">
                <strong>说明：</strong>
                <ul class="mb-0">
                    <li>全局通知会在所有用户页面自动启动</li>
                    <li>只有在非客服聊天页面才会显示通知弹窗</li>
                    <li>通知会在10秒后自动隐藏</li>
                    <li>可以通过点击通知跳转到客服页面</li>
                </ul>
            </div>
        </div>
        
        <!-- 页面导航测试 -->
        <div class="test-panel">
            <h3>页面导航测试</h3>
            <p>点击下面的链接测试不同页面的全局通知功能：</p>
            <div class="row">
                <div class="col-md-6">
                    <h5>用户页面</h5>
                    <a href="/customer/dashboard" class="page-link">
                        <i class="fas fa-home"></i> 用户仪表板
                    </a>
                    <a href="/customer/products" class="page-link">
                        <i class="fas fa-shopping-bag"></i> 商品列表
                    </a>
                    <a href="/customer/cart" class="page-link">
                        <i class="fas fa-shopping-cart"></i> 购物车
                    </a>
                    <a href="/customer/orders" class="page-link">
                        <i class="fas fa-file-invoice"></i> 订单管理
                    </a>
                    <a href="/customer/customer-service" class="page-link">
                        <i class="fas fa-headset"></i> 客服聊天（不显示通知）
                    </a>
                </div>
                <div class="col-md-6">
                    <h5>其他页面</h5>
                    <a href="/customer-service/dashboard" class="page-link">
                        <i class="fas fa-user-tie"></i> 客服工作台
                    </a>
                    <a href="/admin/dashboard" class="page-link">
                        <i class="fas fa-cog"></i> 管理员后台
                    </a>
                    <a href="/test/notification-polling" class="page-link">
                        <i class="fas fa-flask"></i> 轮询测试页面
                    </a>
                </div>
            </div>
        </div>
        
        <!-- 实时日志 -->
        <div class="test-panel">
            <h3>实时日志</h3>
            <div id="logArea" style="height: 200px; overflow-y: auto; background: #f8f9fa; border: 1px solid #ddd; padding: 10px; font-family: monospace; font-size: 12px;">
                <!-- 日志内容 -->
            </div>
            <button id="clearLog" class="btn btn-outline-secondary btn-sm mt-2">清空日志</button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        const logArea = document.getElementById('logArea');
        
        function log(message) {
            const timestamp = new Date().toLocaleTimeString();
            const logEntry = `[${timestamp}] ${message}\n`;
            logArea.textContent += logEntry;
            logArea.scrollTop = logArea.scrollHeight;
            console.log(logEntry);
        }
        
        function updateStatus() {
            const currentPage = window.location.pathname;
            const userRoleElement = document.querySelector('[data-user-role]');
            const userRole = userRoleElement ? userRoleElement.getAttribute('data-user-role') : 'unknown';
            
            document.getElementById('currentPage').textContent = currentPage;
            document.getElementById('userRole').textContent = userRole;
            
            // 检查全局通知是否活跃
            const isActive = window.globalNotificationInterval !== null;
            const statusIndicator = document.getElementById('notificationStatus');
            const statusText = document.getElementById('notificationStatusText');
            
            if (isActive) {
                statusIndicator.className = 'status-indicator status-active';
                statusText.textContent = '活跃';
            } else {
                statusIndicator.className = 'status-indicator status-inactive';
                statusText.textContent = '未活跃';
            }
        }
        
        // 按钮事件
        document.getElementById('startNotification').addEventListener('click', function() {
            if (window.globalNotification) {
                window.globalNotification.start();
                log('手动启动全局通知');
                updateStatus();
            } else {
                log('全局通知对象不存在');
            }
        });
        
        document.getElementById('stopNotification').addEventListener('click', function() {
            if (window.globalNotification) {
                window.globalNotification.stop();
                log('手动停止全局通知');
                updateStatus();
            } else {
                log('全局通知对象不存在');
            }
        });
        
        document.getElementById('checkNow').addEventListener('click', function() {
            if (window.globalNotification) {
                window.globalNotification.checkUnread();
                log('手动检查未读消息');
                document.getElementById('lastCheck').textContent = new Date().toLocaleTimeString();
            } else {
                log('全局通知对象不存在');
            }
        });
        
        document.getElementById('showTestNotification').addEventListener('click', function() {
            if (window.globalNotification) {
                window.globalNotification.show(1);
                log('显示测试通知');
            } else {
                log('全局通知对象不存在');
            }
        });
        
        document.getElementById('hideNotification').addEventListener('click', function() {
            if (window.globalNotification) {
                window.globalNotification.hide();
                log('隐藏通知');
            } else {
                log('全局通知对象不存在');
            }
        });
        
        document.getElementById('clearLog').addEventListener('click', function() {
            logArea.textContent = '';
            log('日志已清空');
        });
        
        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            log('全局通知测试页面已加载');
            updateStatus();
            
            // 定期更新状态
            setInterval(updateStatus, 2000);
            
            // 监听全局通知事件
            const originalConsoleLog = console.log;
            console.log = function(...args) {
                const message = args.join(' ');
                if (message.includes('全局') || message.includes('通知') || message.includes('客服')) {
                    log(`控制台: ${message}`);
                }
                originalConsoleLog.apply(console, args);
            };
        });
    </script>
</body>
</html> 